<template id="user-edit">
        <el-form
                :label-position="labelPosition"
                :model="form"
                :rules="rules"
                ref="editForm">
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                <el-input v-model="form.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
                <el-input v-model="form.username" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                <el-input placeholder="不修改请留空" type="password" v-model="form.password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机" :label-width="formLabelWidth" prop="phone">
                <el-input v-model="form.phone" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="类型" :label-width="formLabelWidth">
                <el-select v-model="form.type" placeholder="请选择用户类型">
                    <el-option label="超级管理员" value="1"></el-option>
                    <el-option label="普通用户" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth" prop="note">
                <el-input type="textarea" v-model="form.note" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
</template>

<script>
Vue.component('user-edit', {
    template: '#user-edit',
    data (){
        return {
            labelPosition: 'right',
            form: {
                name: '',
                username: '',
                password: '',
                phone: '',
                type: '',
                note: '',
            },
            rules: {
              name: [
                  {required: true, message: '请输入姓名', trigger: 'blur'}
              ],
              username: [
                  {required: true, message: '请输入用户名', trigger: 'blur'}
              ]
            },
            formLabelWidth: '80px'
        }
    },
    methods: {
        submit: function () {
            var vm = this;
            axios.post(
                '/admin/user/edit/'+this.form.id,
                this.form
            ).then(function (res) {
                console.log(res);
                vm.$message({
                    type: 'success',
                    message: '成功',
                    duration: '500',
                    onClose: function () {
                        vm.$emit('status', res.data);
                        vm.$refs.editForm.resetFields();
                    }
                })
            }).catch(function (error) {
                console.log(error)
                vm.$message.error('出错了，请稍候再试');
                vm.$emit('status', false);
            })
        },
        getData: function (id) {
            var vm = this;
            axios.get('/admin/user/'+id)
                .then(function (res) {
                    res.data.data.password='';
                    vm.form=res.data.data;

                    if (vm.form.type) {
                        // 下拉菜单的值转为字符串
                        vm.form.type = vm.form.type + '';
                    } else {
                        vm.form.type = '';
                    }
                })
                .catch(function (error) {
                    vm.$alert(error);
                })
        }
    }
})
</script>
